<template>
  <el-card ref="card">
    <div class="comment-header">
      <h3>评论</h3>
    </div>
    <el-divider />

    <div style="margin-bottom: 20px">
      <el-input type="textarea" id="reply" v-model="reply_content"></el-input>
      <div style="margin-top: 10px; float: right">
        <el-button type="primary" @click="save">留言</el-button>
      </div>
    </div>

    <el-card v-if="!isCommentShow">
      <h4>快快占领沙发吧！</h4>
    </el-card>
    <div v-else class="comment" v-for="comment in comments.comment" :key="comment.commentId">
      <div >
        <div class="comment-avatar">
          <el-avatar src="https://img1.baidu.com/it/u=3642236042,906489063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"  />
        </div>

        <div class="comment-content">
          <div class="comment-content-author">
            <span class="author">{{ comment.nickname }} </span >
            <span class="time">{{ comment.createTime }} </span>
          </div>

          <div class="comment-content-details">
            <span>{{ comment.content }}</span>
            <span style="margin-left: 5px">
            <el-button type="text" @click="del(comment.commentId)" v-if="name===comment.name">删除</el-button>
            <el-button type="text" @click="showSecondLevelReply($event)">回复</el-button>
          </span>
          </div>

          <div class="second-level-reply">
            <el-input placeholder="请输入留言" v-model="reply_content"></el-input>
            <el-button type="primary" @click="reply(comment.commentId)">回复</el-button>
          </div>

          <!--二级回复-->
          <div class="sub-reply" v-if="comment.reply.length!==0" v-for="b in comment.reply" :key="b.commentId">
            <div class="comment-avatar">
              <el-avatar src="https://img1.baidu.com/it/u=3642236042,906489063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"  />
            </div>
            <div class="comment-content-author">
              <span class="author">{{ b.nickname }} </span >
              <span class="time">{{ b.createTime }} </span>
            </div>

            <div class="comment-content-details">
              <span>{{ b.content }}</span>
              <span style="margin-left: 5px">
            <el-button type="text" @click="del(b.commentId)" v-if="name===b.name">删除</el-button>
            <el-button type="text" @click="showSecondLevelReply($event)">回复</el-button>
          </span>
            </div>

            <div class="second-level-reply">
              <el-input placeholder="请输入留言" v-model="reply_content"></el-input>
              <el-button type="primary" @click="reply(b.commentId)">回复</el-button>
            </div>
          </div>

        </div>
      </div>

    </div>
  </el-card>
</template>

<script setup lang="ts">

import {onMounted, reactive, ref} from "vue";
import {delComment, getComment, getCommentByParentId, saveComment} from "../api/comment";
import router from "../router";
import {ElMessage} from "element-plus";

const props= defineProps({
  websiteId:{
    type:Number,
    // default:3132
  }
})
// console.log(websiteId)
// 获取当前用户的信息
let name=localStorage.getItem('user_info')
// console.log(name)

// 留言内容
const reply_content=ref('')

let comments=reactive({
  comment:[] as Array<any>
})

let isCommentShow=ref(false)
// 获取所有评论
const loadPage=()=>{
  console.log('1111',props)
  // comments.comment[0].reply.push({id:111})
  getComment(props.websiteId).then(res=>{
    console.log('2222',res.data)

    if(props.websiteId==undefined){
      alert('请求出错')
    }
    if(res.data.length>0){
      isCommentShow.value=true
    }

    const temp: any[]=[]
    for(let i=0; i<res.data.length;i++){
      if(res.data[i].parentId==null){
        temp.push(res.data[i])
      }
    }

    for(let k=0; k<temp.length;k++){
      temp[k]=Object.assign({reply:[]},temp[k])
    }

    for(let i=0; i<res.data.length;i++){
      for(let j=0; j<temp.length;j++){
        if(res.data[i].parentId==temp[j].commentId){
          temp[j].reply.push(res.data[i])
        }
      }
    }

    comments.comment=temp
    console.log('333',comments.comment)

  })
}
onMounted( ()=>{
  loadPage()
})

// 回复框是否显示
const dialogVisible=ref(false)

const parent_id=ref<number|null>()
// 提交留言内容
const save=()=>{
  let reply=reactive({
    reply:{
      name:name,
      parent_id:null,
      reply_content:reply_content.value
    }
  })
  if(reply.reply.name==''){
    ElMessage.info('请登录后')
    router.push('.login')
  }
  if(reply.reply.reply_content==''){
    ElMessage.info('请输入内容')
  }else{
    let data:object=reply.reply
    // console.log('reply',data)
    saveComment(data).then(res=>{
      // console.log(res.data)
      if(res.status=='200'){
        ElMessage.success('留言成功')
        reply_content.value=''
        loadPage()
      }
    })
  }

}

// 提交回复评论内容
const reply=(id:number)=>{
  console.log('id',id)
  let reply=reactive({
    reply:{
      name:name,
      parent_id:id,
      reply_content:reply_content.value
    }
  })
  if(reply.reply.name==''){
    ElMessage.info('请登录后')
    router.push('.login')
  }
  if(reply.reply.reply_content==''){
    ElMessage.info('请输入内容')
  }else{
    let data:object=reply.reply
    // console.log('reply',data)
    saveComment(data).then(res=>{
      // console.log(res.data)
      if(res.status=='200'){
        ElMessage.success('留言成功')
        reply_content.value=''
        console.log(getCommentByParentId(id))
        loadPage()
      }
    })
  }
  dialogVisible.value=false
}
// 删除评论
const del = (id:number) => {
  delComment(id).then(res=>{
    if(res.status=='200'){
      ElMessage.success('删除成功')
      loadPage()
    }
  })
}

const showSecondLevelReply=(e:any)=>{
  console.log(e.target)
  let secondLevelReply=document.getElementsByClassName('second-level-reply')
  console.log('second',secondLevelReply[0])
  // secondLevelReply[0].style.display='block'
  secondLevelReply[1].classList.toggle('second-level-reply-block')
}
</script>


<style scoped>
.comment{
  display: flex;
  margin-bottom: 10px;
}
.comment-avatar{
  margin-right: 12px;
  cursor: pointer;
}
.comment-content-author{
  padding-bottom: 8px;
}
.author{
  padding-right: 8px;
  font-size: 14px;
  line-height: 18px;
}
.time{
  font-size: 12px;
  line-height: 14px;
  color: grey;
}
.comment-content{
  display: flex;
  flex-direction: column;
}

.comment-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-divider{
  margin: 5px 0;
}

.second-level-reply{
  display: none;
}
.second-level-reply-block{
  display: block;
}
.sub-reply{
  margin-left: 50px;
}
</style>